import { List, InputItem, WhiteSpace, Button, Picker, TextareaItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import { Setting } from './Setting';

const Item = List.Item;
const Brief = Item.Brief;

class LoginT extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        jtlxm: props.record.jtlxm,
        remark: props.record.remark,
        jtcy: props.record.jtcy,
        // attachment: props.record.attachment,
      };
  }


  onFileInput = (file) => {
    const _this = this;
    const data = new FormData();
    data.append('file', file)

    Toast.loading("正在上传", 0);
    fetch(Setting.BaseUrl + 'file', {
      method: 'POST',
      body: data
    }).then(function (resp) {
      Toast.hide();
      return resp.json();
    }).then(function (json) {
      if (json.success) {
        _this.setState({
          attachment: json.file.image_url
        });
      } else {
        Toast.offline(json.error, 2);
      }
    })
  }

  render() {
    const name = this.props.nodeName;
    return (
      <div className={name}>
        <h2 className="step-title">{this.props.title}</h2>

        <WhiteSpace />

        <List>
          <InputItem
            placeholder=""
            name="txdz"
            defaultValue={this.props.record.txdz}
          >通讯地址</InputItem>
        </List>

        <List>
          <InputItem
            type="phone"
            placeholder=""
            name="yddh"
            defaultValue={this.props.record.yddh || this.props.user.mobile}
          >移动电话</InputItem>
        </List>

        <List>
          <InputItem
            placeholder=""
            name="dzxx"
            defaultValue={this.props.record.dzxx}
          >电子信箱</InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => '家庭成员(限50字)'}>
          <TextareaItem
            name="jtcy"
            rows='5'
            value={this.state.jtcy}
            autoHeight
            count={50}
            placeholder="请输入家庭成员姓名和手机号"
            onChange={(v) => this.setState({ jtcy: v })}
          />
        </List>

        <WhiteSpace />

        <List renderHeader={() => '备注信息(限20字)'}>
          <TextareaItem
            name="remark"
            rows='5'
            value={this.state.remark}
            autoHeight
            count={20}
            placeholder="请填写备注信息"
            onChange={(v) => this.setState({remark: v})}
          />
        </List>

        <WhiteSpace />

        {/* <input type="hidden" value={this.state.attachment} name='attachment' />

        <List>
          <List.Item
            extra={this.state.attachment ? '已上传' : '未上传'}
            arrow="horizontal"
          >
            <span>附件上传</span>
            <input
              type='file'
              ref={(ref) => this.fileInput = ref}
              onChange={() => this.onFileInput(this.fileInput.files[0])}
              style={{
                position: 'absolute',
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                opacity: 0
              }}
            />
          </List.Item>
        </List>

        <WhiteSpace /> */}
      </div>
    );
  }
}

const Step8 = createForm()(LoginT);

export default Step8
